<script setup lang="ts">
import { useMapStore } from "@/store";
import { useMap } from "@/views/pipe-network/components/Map/index.vue";

const store = useMapStore();
const viewMore = (data: any) => {
  const map = useMap();
  if (data.latlng) {
    store.setEditingPipePoint(data);
    map.setView(data.latlng);
  } else {
    ElMessage.error("此数据坐标缺失，无法查看！");
  }
};
defineProps({
  tableData: {
    type: Array,
  },
});
</script>

<template>
  <el-table :data="tableData" style="width: 100%" class="pipe-table">
    <el-table-column label="序号" width="60">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.index }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="管点名称" width="150">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="scope.row.pointName"
            placement="top"
          >
            <span style="margin-left: 10px" class="label">{{
              scope.row.pointName
            }}</span>
          </el-tooltip>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="管点编号" width="130">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="scope.row.pointGisNo"
            placement="top"
          >
            <span style="margin-left: 10px" class="label">{{
              scope.row.pointGisNo
            }}</span>
          </el-tooltip>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="管点类型" width="150">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="scope.row.className"
            placement="top"
          >
            <span style="margin-left: 10px" class="label">{{
              scope.row.className
            }}</span>
          </el-tooltip>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="60">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-button size="small" @click="viewMore(scope.row)">查看</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped lang="scss">
.pipe-table {
  :deep(.cell) {
    text-align: center;
  }
}

.label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
